@import (reference) "less-nameset";
/* ---------- dialog ---------- */
/* 动画 */
@-webkit-keyframes wi-dialog-fadeout {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes wi-dialog-fadeout {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@-webkit-keyframes wi-dialog-fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes wi-dialog-fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@-webkit-keyframes wi-dialog-flyin {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes wi-dialog-flyin {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        transform: translateY(-40px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes wi-dialog-flyout {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }
}
@keyframes wi-dialog-flyout {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        transform: translateY(-40px);
    }
}

body.wi-dialog-open { overflow: hidden; }
.wi-dialog {
//    z-index: 1050;
    position: relative;
}
/* 遮罩层 */
.wi-dialog-overlay {
    position: fixed;
    background: @mask-color;
    top: 0; bottom: 0; left: 0; right: 0;
    -webkit-animation: wi-dialog-fadein .2s;
    animation: wi-dialog-fadein .2s;
}
.wi-dialog-closing > .wi-dialog-overlay {
    -webkit-backface-visibility: hidden;
    -webkit-animation: wi-dialog-fadeout .2s;
    animation: wi-dialog-fadeout .2s;
}

/* wi-dialog-main */
.wi-dialog-main {
    position: fixed;
    left: 50%; top: 50%;
    background: @bg;
    border-radius: @border-radius;
    border: solid @border-size @border-c;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-animation: wi-dialog-fadein .2s;
    animation: wi-dialog-fadein .2s;
    .box-shadow();
}
.wi-dialog-closing > .wi-dialog-main {
    -webkit-animation: wi-dialog-flyout .2s;
    animation: wi-dialog-flyout .2s;
}
/* wi-dialog-main: head */
.wi-dialog-head {
    .dialog-head-style();
    width: 100%;
    padding: 0 2em 0 2*@title-padding;// 右侧padding为关闭按钮宽度
    height: @dialog-head-h;
    line-height: @dialog-head-h;
    position: relative;
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.wi-dialog-close {
    position: absolute;
    top:0;
    right:0;
    width:2em;
    text-align:center; line-height: inherit;
    color: @tool-color;
    cursor: pointer;
    font-size: @font-size+3px;
}
:not(.wi-dialog-head)>.wi-dialog-close{ top: 5px;}
.wi-dialog-close:hover,
.wi-dialog-close:active { color: @tool-hover-color; }
/* wi-dialog-main: content */
.wi-dialog-content {
    margin: 0 auto;
    padding: @cont-padding;
    position: relative;
    overflow: auto;
    width: 100%;
    height: 100%;
}
.wi-dialog-head + .wi-dialog-content {
    height: calc(~"100% - @{dialog-head-h}");
}